<template>
	<view>
		<u-navbar title="菜谱分类" :autoBack="true" leftIconSize="32">
			<u-icon @click="goSearch" name="search" size="38" slot="right"></u-icon>
		</u-navbar>
		<view class="category-menu">
			<view class="menu-left">
				<view class="menu-left-item" v-for="(c, i) in categoryList" :class="{selected: i == currentIndex}"
					@click="currentIndex = i" :key="c.id">
					{{c.name}}
				</view>
			</view>
			<view class="menu-right">
				<!-- {{subMenuList}} -->
				<view class="category-content" v-for="s in subMenuList" :key="s.id">
					<image v-if="s.image_url" class="category-banner" :src="s.image_url" mode="widthFix"></image>
					<view class="sub-item-wrap">
						<view class="tags-box" v-for="c in s.cs" :key="c.id">
							<view class="sub-item-tags" @click="goSearchDetail(c.name)">
								{{c.name}}
							</view>
						</view>
						
					</view>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import {
		http
	} from '../../untils/http.js'
	
	const SEARCHHISTORY = 'searchHistory'

	export default {
		data() {
			return {
				categoryList: [],
				currentIndex: 0
			}
		},
		onLoad() {
			this.getCategoryData()
		},
		// 计算属性是vue提供根据依赖其他可监听到的属性，如data、props、其他计算属性等进行计算，获取结果
		computed: {
			subMenuList() {
				// 计算属性以来 this.categoryList、this.currentIndex
				// 当以上两个依赖任意一个发生改变，计算属性都会重新计算结果
				let subArr = this.categoryList[this.currentIndex]
				return subArr ? subArr.cs : []
			}
		},
		methods: {
			goSearch() {
				uni.navigateTo({
					url: '../search/search'
				})
			},
			async getCategoryData() {
				let res = await http('recipe/flatcatalogs')

				console.log(res);

				this.categoryList = res.result.cs
			},
			goSearchDetail(kw) {
				this.searchStr = kw
				// uni.navigateTo({
				// 	url: '/pages/SearchDetail/SearchDetail?kw=' + kw
				// })
				
				// 每次存入前先获取之前存入的值
				let data = uni.getStorageSync(SEARCHHISTORY) || []
				console.log('storage sync', data);
				
				// 返回值为真保留，为假删除
				data = data.filter(item => item !== kw)
				
				uni.setStorage({
					key: SEARCHHISTORY,
					data: [kw, ...data]
				})
				
				this.searchHistoryArr = [kw, ...data]
				
				uni.navigateTo({
					url: '/pages/searchDetail/searchDetail?kw=' + kw
				})
			}
		}
	}
</script>

<style lang="scss">
	.category-menu {
		position: fixed;
		left: 0;
		top: 44px;
		bottom: 0;
		right: 0;
		display: flex;

		.menu-left {
			flex: 0 0 80px;
		}

		.menu-left-item {
			position: relative;
			padding: 10px 0;
			line-height: 20px;
			text-align: center;
			font-size: 14px;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;

			&.selected::after {
				position: absolute;
				right: 0;
				top: 12px;
				display: block;
				height: 20px;
				width: 1px;
				background-color: #ff990a;
				content: '';
			}
		}

		.menu-right {
			flex: 1;
			padding: 0 10px;
			box-sizing: border-box;
		}

		.category-content {
			padding-bottom: 10px;

			.category-banner {
				margin-bottom: 10px;
				width: 100%;
				border-radius: 10px;
			}
			
			.sub-item-wrap {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				
				.tags-box {
					// flex: 1 0 33%;
					display: flex;
					justify-content: center;
					min-width: 33%;
				}
				
				.sub-item-tags {
					// flex: 1 0 80%;
					box-sizing: border-box;
					margin-bottom: 10px;
					padding: 4px 10px;
					border: 1rpx solid rgba(7, 17, 27, .1);
					min-width: 90%;
					border-radius: 8px;
					white-space: nowrap;
					font-size: 12px;
					text-align: center;
				}
			}
		}
	}
	
	
</style>